<?php
///////////////////////////////////////////////////////////////////////////////
// File:          index.php
// Description:   Main page of the flogr application that displays the most 
//                recently uploaded photo tagged with the configured tag(s).
// Usage:         
//  index.php?id=<id>      id - The photo id of the photo to display.
//  index.php?page=<page>  page - The index in the current stream of the photo 
//                         to be displayed.
///////////////////////////////////////////////////////////////////////////////
require_once("inc/header.php");

$page = $_GET['page'] ? $_GET['page'] : 1;
$prev = $page + 1;
$next = $page - 1;
$prevLink = "index.php?page=" . $prev;
$nextLink = "index.php?page=" . $next;

if ($_GET['id']) 
{
   $id = $_GET['id'];
}
else if ($config_flickrGroupId)
{     
   $photos = $f->groups_pools_getPhotos($config_flickrGroupId, 
      $config_flickrTags, $config_flickrUserId, 
      "original_format,date_taken,date_upload", "1", $page);   
   $id = $photos['photo'][0]['id'];
}
else if ($config_flickrUserId)
{
   $photoSearchParams = array(
      "user_id"=>$config_flickrUserId, 
      "tags"=>$config_flickrTags, 
      "extras"=>"original_format,date_taken,date_upload", 
      "per_page"=>"1", 
      "page"=>$page);
      
   $photos = $f->photos_search($photoSearchParams);   
   $id = $photos['photo'][0]['id'];
}
else
{
   die("User configuration settings are not complete.  Please update the required settings in config.inc");
}

$info = $f->photos_getInfo($id);

//
// Photos are displayed at 600px wide so find the source URL of the largest 
// available photo whose size is <= 600px.
//
$photoSizes = $f->photos_getSizes($id);
$maxWidth = 0;
foreach ($photoSizes as $photoSize) 
{   
   if ($maxWidth < (int)$photoSize['width']) 
   {
      $maxWidth = (int)$photoSize['width'];
      $currPhoto = $photoSize['source'];
      if ($config_photoSize <= (int)$maxWidth)
         break;
   }
}

// Prepare the photo title for display.
$photoTitle = htmlspecialchars($info['title'], ENT_QUOTES);

// Prepare the photo description for display.
$photoDescription = htmlspecialchars($info['description'], ENT_QUOTES);

// Get the photo thumbnail to display on the details div.
$photoThumbnail = "<img src='" . $f->buildPhotoURL($info, "thumbnail") . "'/>";

//
// Build a link string of the photo's tags.
//
$tagData = "";
if ($info['tags'])
{
   foreach ($info['tags']['tag'] as $tag) 
   {
      $tagData .= "<a href='recent.php?tag=" . 
                  $tag['_content'] . "'>" . $tag['_content'] . "</a> ";
   }
}

//
// Build a table of the photo's exif data.
//
$exif = $f->photos_getExif($id);
if ($exif)
{
   $exifData = "<table>";
   foreach ($exif['exif'] as $exifItem) 
   {
      if (stristr($config_exifLabels, $exifItem['label']))
      {
         $exifData .= "<tr>";
         $exifData .= "<td>" . $exifItem['label'] . "</td>";
         if ($exifItem['clean'])
         {
            $exifData .= "<td>" . $exifItem['clean'] . "</td>";      
         }
         else
         {
            $exifData .= "<td>" . $exifItem['raw'] . "</td>";
         }
         $exifData .= "</tr>";
      }
   }
   $exifData .= "</table>";
}

//
// Build a table of the photo's comments.
//
$commentData = "<table>";
if ($info['comments']) 
{
   $comments = $f->photos_comments_getList($id);
   foreach ($comments['comment'] as $comment) 
   {
      $commentData .= "<tr>";
      $commentData .= "<td>" . $comment['authorname'] . "</td>";
      $commentData .= "<td>" . $comment['_content'] . "</td>";
      $commentData .= "</tr>";
   }
}
$commentData .= "</table>";

//
// Build the page navigation span
//
$pageNav = "";
if ($prev <= $photos['pages'])
{
   $pageNav .= "<a href='" . $prevLink . "'>prev </a>";
}
if (0 < $next)
{
   $pageNav .= "<a href='" . $nextLink . "'>next</a>";
}

?>


<!-- Image title and next/prev buttons -->
<div id='page_header'>
   <span id='page_title'><?php echo $photoTitle; ?></span>
   <span id='page_nav'><?php echo $pageNav; ?></span>
</div>

<div id='page'>

   <!-- Build the photo detail floating div -->
   <div id='info_comments'>
      
      <div class='block'>
         <div class='heading'><?php echo $photoTitle; ?></div>
     
         <div class='thumb'>
            <a href="<?php echo $info['urls']['url'][0]['_content']; ?>">
               <?php echo $photoThumbnail; ?>
            </a>
            <?php echo $info['description']; ?>
            <p>tags: <?php echo $tagData; ?>
         </div>         
      </div>
      
      <div class='block'>
         <div class='heading'>exif</div>
         <?php echo $exifData; ?>
      </div>
      
      <div class='block'>
         <div class='heading'>comments</div>
         <?php echo $commentData; ?>
         <p/>
         <a href='<?php echo $info['urls']['url'][0]['_content']; ?>'>Leave a comment</a>
      </div>
      
   </div>
   
   <!-- Show the photo and link the photo to the previous photo -->
   <?php if ($prev <= $photos['pages']) { ?>
      <a href='<?php echo $prevLink; ?>'>
   <?php } ?>
         <img id='photo' class='photo' src='<?php echo $currPhoto; ?>' title="<?php echo $photoTitle; echo " :: "; echo $photoDescription;  ?>" alt='' />
   <?php if ($prev <= $photos['pages']) { ?>
      </a>
   <?php } ?>
      
</div>

<!-- Image meta data: date posted and comments link -->
<div id='page_meta'>
   <span style='float:left'><?php echo date("F j, Y", $info['dates']['posted']); ?></span>
   <span style='float:right'>
      <a id='info_comments_toggle' name='info_comments_toggle' href='#'>Details & Comments (<?php echo $info['comments']; ?>)</a>
   </span>
</div>

<!-- Javascript effects -->
<script type='text/javascript' src='js/mootools.v1.11.js'></script>
<script type='text/javascript'>
   window.addEvent('domready', function(){
      /**
      * Photo tool tip effect
      */
      var PhotoNav = new Tips($$('.photo'), {
         initialize:function() {
            this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
         },
         onShow: function(toolTip) {
            this.fx.start(0.85);
         },
         onHide: function(toolTip) {
            this.fx.start(0);
         }
      });   
      
      /**
      * Slide effect for photo details
      */      
      var fx = new Fx.Styles('info_comments', {duration:400, wait:true});     
      
      // Clicking on the details link will show/hide the details div
      $('info_comments_toggle').addEvent('mouseover', function(e) {
      
         if ($('info_comments').getStyle('visibility') == 'hidden') {
            /**
            * Right-align the details div in the photo div and stretch the
            * details div to the bottom of the photo.
            */
            var rightMargin = $('container').getStyle('width').toInt() -  $('photo').getStyle('width').toInt();               
            $('info_comments').setStyle('right', rightMargin / 2);
            $('info_comments').setStyle('height', $('photo').getStyle('height').toInt() - 20);

            fx.start({
               //'width': '300',
               'opacity': ['0', '.85'],
               'visibility': 'visible'
            });
         } else {
            fx.start({      
               //'width': '0',
               'opacity': '0',
               'visibility': 'hidden'
            });
         }
      });
      
      /*
      * Clicking on or moving out of the details div will hide it
      */
      $('info_comments').addEvent('click', function(e) {
         fx.start({
            //'width': '0',
            'opacity': '0',
            'visibility': 'hidden'
         });
      });
      
      $('info_comments').addEvent('mouseleave', function(e) {
         fx.start({
            //'width': '0',
            'opacity': '0',
            'visibility': 'hidden'
         });
      });      
   })
</script>

<?php
require_once("inc/footer.php"); 
?>
